import React, { useState } from "react";
import { history } from "umi";
import bgImage from "@/assets/p2/background2.png";
import "@/pages/p2/gamepage.css";
import "@/pages/p2/huanfang.css";
import Card from "@/components/Card";

const huanfang = () => {
	const [num1, setNum1] = useState(0);
	const [num2, setNum2] = useState(0);
	const [num3, setNum3] = useState(0);
	const [num4, setNum4] = useState(0);
	const [num5, setNum5] = useState(0);
	const [num6, setNum6] = useState(0);
	const [isSuccess, setIsSuccess] = useState(false);

	const handleInputChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
		setNum1(parseInt(event.target.value)); // 更新状态变量 inputValue
	};
	const handleInputChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
		setNum2(parseInt(event.target.value));
	};
	const handleInputChange3 = (event: React.ChangeEvent<HTMLInputElement>) => {
		setNum3(parseInt(event.target.value));
	};
	const handleInputChange4 = (event: React.ChangeEvent<HTMLInputElement>) => {
		setNum4(parseInt(event.target.value));
	};
	const handleInputChange5 = (event: React.ChangeEvent<HTMLInputElement>) => {
		setNum5(parseInt(event.target.value));
	};
	const handleInputChange6 = (event: React.ChangeEvent<HTMLInputElement>) => {
		setNum6(parseInt(event.target.value));
	};

	const queren = () => {
		if (
			num1 == 9 &&
			num2 == 11 &&
			num3 == 7 &&
			num4 == 3 &&
			num5 == 6 &&
			num6 == 10
		) {
			setIsSuccess(true);
		}
	};

	return (
		<div
			className="game-page"
			style={{ backgroundImage: `url(${bgImage})` }}
		>
			<div
				className="bg"
				style={{ display: isSuccess ? "none" : "block" }}
			>
				<h2>在空格处填入正确数字（红色）</h2>
				<ul className="huanfang">
					<li>
						<br />4
					</li>
					<li>
						<br />
						<input
							type="number"
							value={num1}
							onChange={handleInputChange1}
						/>
					</li>
					<li>
						<br />8
					</li>
					<li>
						<br />
						<input
							type="number"
							value={num2}
							onChange={handleInputChange2}
						/>
					</li>
					<li>
						<br />
						<input
							type="number"
							value={num3}
							onChange={handleInputChange3}
						/>
					</li>
					<li>
						<br />
						<input
							type="number"
							value={num4}
							onChange={handleInputChange4}
						/>
					</li>
					<li>
						<br />
						<input
							type="number"
							value={num5}
							onChange={handleInputChange5}
						/>
					</li>
					<li>
						<br />5
					</li>
					<li>
						<br />
						<input
							type="number"
							value={num6}
							onChange={handleInputChange6}
						/>
					</li>
				</ul>
				<button id="b4" onClick={queren}>
					确 认
				</button>
			</div>
			<Card
				onClick={() => {
					history.push("/p2/fangcheng");
				}}
				visible={isSuccess}
				cardId={8}
			>
				<p>获得成就</p>
				<p>均输</p>
			</Card>
		</div>
	);
};

export default huanfang;
